<template>
     <view class="app">
		 <view class="main">
		   <h2>乳研智汇</h2>
		 </view>
       <view class="top"><h3>登录您的账户</h3></view>
     <view class="msgdiv" :class="{'active':green,'msg':red}">
         <view class="mesg" :class="{'achieve':succ}">{{infor}}</view>
     </view>
 <form id="loginuser" @submit="onSubmit">
     <view class="user">
          <label for="username1" class="t">用户名</label>
          <input type="text" id="username1" name="username" class="userinput"
          :class="{'userinputfocus':isfocus}"
          @focus="isfocus=true"
          @blur="isfocus=false"
          >
     </view>
     <view class="user">
              <label for="password1" class="t">输入密码</label>
              <input type="password" id="password1" name="password" class="userinput"
              :class="{'userinputfocus':isfocus1}"
              @focus="isfocus1=true"
              @blur="isfocus1=false"
              >
     </view>
     <view class="btn">
     
               <button class="button" form-type="submit" >登录账户</button>
     </view>
     </form>
     <view class="forget">
     <p>还没账户？</p><navigator url="/pages/assign/assign" open-type="navigate" class="link">点我注册</navigator>
     </view>
     </view>
</template>
<script>
	import { mapState, mapGetters } from 'vuex'
export default {
data() {
return {
texts: '',
infor: '',
green: false,
red: false,
succ: false,
isfocus: false,
isfocus1: false,
count: 5,
timer1: null,
timer2: null
}
},
computed:{
...mapState(['isLogin','usernamevuex'])	
},
methods: {

			async onSubmit(e) {
			const { username, password } = e.detail.value
			if (!username || !password) {
			this.infor = '用户名或密码不能为空'
			this.red = true
			this.green = false
			this.succ = false
			return
			}
		
			uni.showLoading({ title: '登录中...' })
			try {
			const hasLogin = await new Promise(resolve => {
			uni.getStorage({
			key: 'token',
			success: () => resolve(true),
			fail: () => resolve(false)
			})
			})
			if (hasLogin) {
			this.infor = '您已登录'
			this.green = true
			this.red = false
			this.succ = true
			this.timer2 = setTimeout(() => {
			uni.reLaunch({ url: '/pages/index/index' })
			}, 3000)
			return
			}
			 uni.request({
			url: '/api/login/web',
			method: 'POST',
			data: { username, password },
			success: (res) => {
				if(res.statusCode===200){
					this.$store.commit('NAME',username)
					const header=res.header||res.headers
					console.log(res);
					console.log(header);
					  uni.setStorageSync('token',header['token'])
					uni.setStorage({
						key:'username',
						data:username
					})
					uni.setStorageSync('id',header['userInformation'])
					this.infor = '登录成功'
					this.green = true
					this.red = false
					this.succ = true
					this.timer1 = setTimeout(() => {
					uni.reLaunch({ url: '/pages/index/index' })
					}, 3000)
				}
				else{
					this.infor = '登录失败，请重试'
					this.red = true
					this.green = false
					this.succ = false
				}
			}
			})
		
			} catch (error) {
			console.error('登录失败:', error)
			this.infor = '登录失败，请重试'
			this.red = true
			this.green = false
			this.succ = false
			} finally {
			uni.hideLoading()
			}
			},
},

beforeUnmount() {
clearTimeout(this.timer1)
clearTimeout(this.timer2)
}
}
</script>
<style scoped>
.app {
width: 70%;
margin: calc(var(--status-bar-height) + 100rpx) auto 0 auto;
background-color: white;
display: flex;
flex-direction: column;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
}
.top {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-top: 4%;
margin-bottom: 4%;
}
.main{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
h2{
color: #409EFF;
font-size: 48rpx;
font-weight: 600;
}

.msgdiv {
width: 100%;
height: 80rpx;
border-top: 1rpx solid #eee;
border-bottom: 1rpx solid #eee;
display: flex;
justify-content: center;
align-items: center;
}
.mesg {
display: flex;
align-items: center;
justify-content: center;
font-size: 30rpx;
color: red;
}
.achieve {
color: black
}
.msg {
background-color: rgb(252, 204, 204);
border-radius: 8rpx;
}
.active {
background-color: #d0edf2;
border-radius: 8rpx;
}
.user {
padding-top: 1%;
height: 100%;
}
.t {
display: block;
margin-bottom: 1%;
padding-left: 5%
}
.userinput {
width: 90%;
margin-left: 5%;
height: 75rpx;
box-sizing: border-box;
outline: none;
border: 1rpx solid #eee;
padding-left: 8rpx;
border-radius: 8rpx;
}
.userinputfocus {
border: 1rpx solid #409EFF !important;
}
.btn {
width: 100%;
margin-bottom: 3%;
display: flex;
justify-content: center;
align-items: center;
margin-top: 20rpx;
flex-direction: column;
}
.button {
width: 70%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
font-size: 30rpx;
padding: 8rpx 16rpx;
border-radius: 4rpx;
font-weight: 500;
box-sizing: border-box;
border: none;
color: white;
line-height: 50rpx;
background-color: #409EFF;
}

.forget {
width: 100%;
border-top: 1rpx solid #eee;
display: flex;
justify-content: center;
align-items: center;
padding-top: 3%;
margin-bottom: 3%;
}
.link {
color: #3a8ee6
}

@media (max-width:767rpx) {
.app {
width: 80%;
 padding: 30rpx;
    margin-top: calc(var(--status-bar-height) + 30rpx);
	  
	}
	h2 {
	  font-size: 42rpx;
	}
	
	h3 {
	  font-size: 32rpx;
	margin-bottom: 20rpx;
	margin-top: 10rpx;
	padding-top: 0;
	padding-bottom: 0;
	}
	
	.userinput {
	  height: 80rpx;
	font-size: 28rpx;
	}
	
	.button {
	  height: 60rpx;
	  font-size: 30rpx;
	}
}
@media (max-width:360rpx){
	.button{
		font-size: 25rpx;
	}
	h2{
		font-size: 40rpx;
		font-weight: 500;
	}
	h3{
		font-size:30rpx ;
	}
}
@media (min-width: 768px) and (max-width: 1023px) {
  .app {
    width: 70%;
    max-width: 600px;
	.popup{
		  width: 400rpx;
	}
	.cont{
		  padding: 0 20rpx 0 20rpx;
	}
	.button {
	  height: 60rpx;
	  font-size: 30rpx;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	
  }
}
@media (min-width: 1024px) {
 .app {
   width: 40%;
   max-width: 500px;
 }
 .popup{
 	  width: 420rpx;
 }
 .cont{
 	  padding: 0 20rpx 0 20rpx;
 }
 .userinput {
   height: 80rpx;
 font-size: 28rpx;
 }
}

</style>